Javascript Q&A

Q - How is JavaScript executed by browsers?
A - JavaScript is parsed first (analyzed), and then it is executed (carried out). If an error is found in the code during the parsing phase, then the execution phase is canceled. If the JavaScript contains no errors, then the code is executed by the browser. In the context of a browser, this means that statements written in the global scope that are not functions, get executed.
Q - In what order is JavaScript executed in a browser?
A - Inline and external scripts are executed in the order in which they appear in an (x)HTML document. The contents of each script is parsed and executed before continuing on to the next script. It should be noted that the loading of an (x)HTML page is halted while loading external JavaScript files.
Q - In what order are (x)HTML pages and there assets loaded?
A - Browsers will loosely load an (x)HTML document in the following order:
(x)HTML is parsed by the browser
External scripts/style sheets are loaded
Scripts are executed as they are parsed in the document
(x)HTML DOM is fully constructed
img, embed, object, and iframe content is loaded
The page is finished loading and the JavaScript onload event is invoked
Q - What is the onload event?
A - The onload property of the window object specifies an event handler function that is invoked when a document or frameset is completely loaded into its window or frame. This property can also be set by using the onload attribute of the body element.
Q - Why isn't the window.onload adequate for all my DOM scripting needs?
A - There are two major limitations to the onload property. The first limitation is that this property can only accept one function. If you try to attach two functions to this event, the last one declared will be attached to the event and the first function assigned will be discarded.
The second limitation of window.onload is that the event fires only after everything in an (x)HTML document is loaded — including images, flash, and frames! Waiting for these elements to load before the onload event is fired can cause UI errors if the user tries to interact with the page before the JavaScript event handlers have been applied to the DOM via the onload event. Moreover, the user experience can really suffer if JavaScript functionality is delayed due to large assets being loaded into the browser.
Q - Why do I often see JavaScript written/included before the closing body element in an (x)HTML document?
A - DOM elements can not be accessed by JavaScript until the browser has loaded the HTML elements into the DOM. By placing JavaScript at the end of an (x)HTML document (before the closing body element), you will ensure that the script is called as soon as the DOM is constructed/loaded and ready for manipulation. An advantage of this approach is that JavaScript code is executed right after the DOM is constructed and possibly before the onload event would fire.
JavaScript beginners get tripped up by this constantly by placing code that manipulates the DOM in the header element of an (x)HTML document. This causes an error because the DOM has not yet been constructed and thus is not yet accessible to JavaScript that traverses/manipulates the DOM.
Q - Is JavaScript in the global scope still being executed even after the onload event is fired?
A - All JavaScript that is available when the browser first parses the page is executed before the onload event is fired. Of course, other events can trigger JavaScript execution after the onload event.
Q - Can you explain the difference between the following DOM event techniques: onload, DOM Ready, and Element Ready?
A - All of these techniques are essentially used to execute JavaScript only after the entire page has been loaded, the DOM has completely loaded, or the DOM has partially loaded in a web browser. Below I specifically discuss each technique.
onload - This technique is rather self explanatory. A Function assigned to the onload property of the window object will be executed once an (x)HTML document has been completely loaded by a web browser. For example:
view plaincopy to clipboardprint
//
window.onload = function(){ alert("page loaded") };
// //
window.onload = function(){ alert("page loaded") };
//

Since only one function can be assigned to this property at a time, many developers started using an event utility script to add multiple onload handlers to a web page. You might be familiar with the original addevent script, and its numerous predecessors.
DOM ready - This technique tries to improve upon the onload technique by executing javascript code once the DOM is constructed, and before the page has actually finished loading. How this is done has been the topic of numerous blog posts.
Element ready - This technique attempts to surpass the DOM ready technique by checking the DOM loading status at intervals for the availability of a specific element. Doing this will allow for the execution of JavaScript DOM manipulation code as soon as the element itself, but not necessarily the entire DOM, is ready.
Q - Can I assign an event handler to window.onload, and at the same time set the onload attribute of the body element to a different event handler?
A - No, providing a value to the onload attribute of the body element will override any event handlers you assign to the window object.
Q - What is meant when it is said that client-side javascript is single threaded?
A - This means that the parsing of (x)HTML documents stops while scripts are loaded and executed, and that web browsers stop responding to user input while event handlers are being executed.
This is a good thing, and a bad thing. It's good because you can rest comfortable knowing that two event handlers will never run at the same time. Also, you can manipulate document content knowing that no other thread is attempting to modify the same piece of content.
It's bad in that intensive scripts can hold up the user experience by causing periods of unresponsiveness from a JavaScript driven UI.

More...
http://javascriptant.com/articles/
http://javascriptant.com/articles/10/qa-on-javascript-execution-onload-techniques